<template>
  <el-card class="contanier">
    <div slot="header" class="clearfix">
      <span>旅游数据概览</span>
      <div class="circle" style="float: right; padding: 3px 0">  
    <div  
      slot="item1"  
      class="item"  
      @click="toggleActive('item1')"  
      :class="{ active: isActive('item1') }"  
    >  
      Item 1  
    </div>  
    <div  
      slot="item2"  
      class="item"  
      @click="toggleActive('item2')"  
      :class="{ active: isActive('item2') }"  
    >  
      Item 2  
    </div>  
    <div  
      slot="item3"  
      class="item"  
      @click="toggleActive('item3')"  
      :class="{ active: isActive('item3') }"  
    >  
      Item 3  
    </div>  
    <div  
      slot="item4"  
      class="item"  
      @click="toggleActive('item4')"  
      :class="{ active: isActive('item4') }"  
    >  
      Item 4  
    </div>  
  </div>  
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},

  methods: {},
};
</script>

<style scoped>
.active{
    background-color: #E0E3DA;
}
.contanier {
  margin: 30px;
  width: 40%;
  height: 500px;
  .clearfix{
    .circle{
        display: flex;
        .item{
            width:10px;
            height: 10px;
            border-radius: 50%;
            background-color:#eee;
            margin-right: 5px;
        }
    }
  }
}





</style>
